<ui:composition template="../templates/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"  xmlns:f="http://java.sun.com/jsf/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">

	<!-- Page title -->
	<ui:define name="title">${msg.gallery_technical_data_sheet_title}</ui:define>
	
	<!-- Page content -->
	<ui:define name="content">
	
		<!-- Breadcrumb -->
		<h:form id="technicalDataSheetBreadcrumbForm">
			<p:breadCrumb styleClass="breadcrumb">
				<p:menuitem title="${msg.gallery_technical_data_sheet_breadcrumb_home}" url="#{navigationBean.accessHomePage}" />
				<p:menuitem styleClass="galleryCategoryColor" title="${msg.gallery_technical_data_sheet_breadcrumb_gallery}" url="#{navigationBean.accessGalleryPage}" 
				value="${msg.gallery_technical_data_sheet_breadcrumb_gallery}"/>
				<p:menuitem disabled="true" rendered="#{not empty technicalDataSheetBean.currentPhotoId}" styleClass="galleryCategoryColor" 
				value="#{msg.gallery_technical_data_sheet_breadcrumb_technical_data_sheet} n°#{technicalDataSheetBean.currentPhoto.code}"/>
				<p:menuitem disabled="true" rendered="#{empty technicalDataSheetBean.currentPhotoId}" styleClass="galleryCategoryColor" 
				value="#{msg.gallery_technical_data_sheet_breadcrumb_impossible_access}"/>
			</p:breadCrumb>
		</h:form>
	
		<p:fieldset id="technicalDataSheetFieldset" styleClass="fieldset galleryFieldset galleryCategoryBorderColor">
			
			<f:facet name="legend">
				<p:outputPanel styleClass="galleryCategoryColor">
					<h:outputText rendered="#{not empty technicalDataSheetBean.currentPhotoId}" value="#{technicalDataSheetBean.currentPhoto.code} - #{msg[technicalDataSheetBean.currentPhoto.titleKey]}"/>
					<h:outputText rendered="#{empty technicalDataSheetBean.currentPhotoId}" value="${msg.gallery_technical_data_sheet_the_access_to_this_page_has_failed}"/>
				</p:outputPanel>
			</f:facet>
			
			<!-- Error message if no photo can be found -->
			<ui:include src="../components/facesMessages.xhtml">
				<ui:param name="messageContent" value="${msg.gallery_technical_data_sheet_breadcrumb_a_required_parameter_is_missing}" />
				<ui:param name="messageType" value="error" />
				<ui:param name="rendered" value="#{empty technicalDataSheetBean.currentPhotoId}" />
			</ui:include>
			
			<!-- Photo description if it's found -->
			<p:outputPanel layout="block" rendered="#{not empty technicalDataSheetBean.currentPhotoId}" styleClass="tdsContainer">
				<h:graphicImage onclick="showPictureDialog.show();" value="/images/#{technicalDataSheetBean.currentPhoto.technicalDataSheetPath}" />
				<p:outputPanel layout="block" styleClass="tdsOverlay">
				
					<!-- Title line -->
					<p:outputPanel layout="block" styleClass="tdsOverlayLine tdsOverlayTitleLine">
						#{msg[technicalDataSheetBean.currentPhoto.titleKey]}
					</p:outputPanel>
					
					<!-- Description line -->
					<p:outputPanel layout="block" styleClass="tdsOverlayLine tdsOverlayDescLine">
						<p:outputPanel styleClass="leftPart" >
							${msg.gallery_technical_data_sheet_image_overlay_shot_on}
							<h:outputText value="#{technicalDataSheetBean.currentPhoto.shootingJdkDate}">
								<f:convertDateTime dateStyle="medium" locale="#{userBean.currentLocale.language}"/>
							</h:outputText>
							| ${msg.gallery_technical_data_sheet_image_overlay_added_on}
							<h:outputText value="#{technicalDataSheetBean.currentPhoto.additionJdkDate}">
								<f:convertDateTime dateStyle="medium" locale="#{userBean.currentLocale.language}"/>
							</h:outputText>
						</p:outputPanel>
						<p:outputPanel rendered="#{technicalDataSheetBean.currentPhoto.model}" styleClass="rightPart" >
							${msg.gallery_technical_data_sheet_image_overlay_model}: #{not technicalDataSheetBean.currentPhoto.modelName} 
						</p:outputPanel>
					</p:outputPanel>
				</p:outputPanel>
			</p:outputPanel>
			
			<!-- Dialog used to display the photo in the biggest available size -->
			<p:dialog draggable="false" header="#{msg[technicalDataSheetBean.currentPhoto.titleKey]}" modal="true" rendered="#{not empty technicalDataSheetBean.currentPhotoId}" resizable="false" 
				widgetVar="showPictureDialog">
				<h:graphicImage styleClass="tdsFullPicture" value="/images/#{technicalDataSheetBean.currentPhotoPath}" />
			</p:dialog>
			
			<!-- Photo's details if it's found -->
			<h:form rendered="#{not empty technicalDataSheetBean.currentPhotoId}">
				<p:accordionPanel activeIndex="0" styleClass="galleryCategoryBackground galleryCategoryTabColor">
					
					<!-- Location -->
					<p:tab title="${msg.gallery_technical_data_sheet_accordion_tab_location}" >
						<p:layout>
							<p:layoutUnit position="west" size="400" >
								<p:outputPanel layout="block" styleClass="formTable readonly tdsLocationDetailsForm">
									<div class="formRow">
										<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_location_details_latitude}: </span>
										<span class="formCell">
											<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.latitude}"/>
										</span>
									</div>
									<div class="formRow">
										<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_location_details_longitude}: </span>
										<span class="formCell">
											<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.longitude}"/>
										</span>
									</div>
									<div class="formRow">
										<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_location_details_city}: </span>
										<span class="formCell">
											<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.city.name} (#{technicalDataSheetBean.currentPhoto.city.zipCode})"/>
										</span>
									</div>
									<p:outputPanel rendered="#{not empty technicalDataSheetBean.currentPhoto.city.department}" styleClass="formRow">
										<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_location_details_department}: </span>
										<span class="formCell">
											<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.city.department.name}"/>
										</span>
									</p:outputPanel>
									<div class="formRow">
										<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_location_details_country}: </span>
										<span class="formCell">
											<p:inputText readonly="true" value="#{msg[technicalDataSheetBean.currentPhoto.city.country.labelKey]}"/>
										</span>
									</div>
								</p:outputPanel>
							</p:layoutUnit>
							<p:layoutUnit position="center">
								<p:gmap center="#{technicalDataSheetBean.currentPhoto.latitude},#{technicalDataSheetBean.currentPhoto.longitude}" model="#{technicalDataSheetBean.currentMapModel}" 
									streetView="true" styleClass="tdsGMap" type="roadmap" zoom="15"/>
							</p:layoutUnit>
						</p:layout>
					</p:tab>
					
					<!-- Exif's -->
					<p:tab title="${msg.gallery_technical_data_sheet_accordion_tab_exif_data}">
						<div class="simpleAccordionContent ui-widget-content ui-corner-all">
							<div class="formTable readonly tdsExifsForm">
								<div class="formRow">
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_iso_speed}: </span>
									<span class="formCell">
										<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.iso}"/>
									</span>
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_exposure_time}: </span>
									<span class="formCell">
										<p:inputText readonly="true" rendered="#{technicalDataSheetBean.currentPhoto.slowExposureTime}" value="#{technicalDataSheetBean.currentPhoto.exposureTime} #{msg.general_time_seconds}"/>
										<p:inputText readonly="true" rendered="#{not technicalDataSheetBean.currentPhoto.slowExposureTime}" 
											value="1/#{technicalDataSheetBean.currentPhoto.exposureTime} #{msg.general_time_seconds}"/>
									</span>
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_focal}: </span>
									<span class="formCell">
										<p:inputText readonly="true" value="F/#{technicalDataSheetBean.currentPhoto.focal}"/>
									</span>
								</div>
								<div class="formRow">
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_camera}: </span>
									<span class="formCel">
										<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.cameraModel.cameraBrand.name} #{technicalDataSheetBean.currentPhoto.cameraModel.name}"/>
									</span>
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_relative_aperture}: </span>
									<span class="formCell">
										<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.relativeAperture}"/>
									</span>
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_focal_distance}: </span>
									<span class="formCell">
										<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.focalDistance} mm"/>
									</span>
								</div>
								<div class="formRow">
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_white_balance}: </span>
									<span class="formCell">
										<p:inputText readonly="true" value="#{msg[technicalDataSheetBean.currentPhoto.whiteBalanceMode.labelKey]}"/>
									</span>
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_flash_mode}: </span>
									<span class="formCell">
										<p:inputText id="inputFlashMode" readonly="true" value="#{msg[technicalDataSheetBean.currentPhoto.flashModes[0].labelKey]} #{(fn:length(technicalDataSheetBean.currentPhoto.flashModes) > 1)?'...':''}"/>
										<p:tooltip for="inputFlashMode" rendered="#{fn:length(technicalDataSheetBean.currentPhoto.flashModes) > 1}"  >
											<p:dataList itemType="square" styleClass="flashModesDataList" value="#{technicalDataSheetBean.currentPhoto.flashModes}" var="flashMode">
												#{msg[flashMode.labelKey]}
											</p:dataList>
										</p:tooltip>
									</span>
									<span class="formCell formLabelCell">${msg.gallery_technical_data_sheet_accordion_tab_exif_data_focal_distance_35mm}: </span>
									<span class="formCell">
										<p:inputText readonly="true" value="#{technicalDataSheetBean.currentPhoto.focalDistance35mm} mm"/>
									</span>
								</div>
							</div>
						</div>
					</p:tab>
					
					<!-- Retouchs -->
					<p:tab title="${msg.gallery_technical_data_sheet_accordion_tab_retouchs}">
						<div class="simpleAccordionContent ui-widget-content ui-corner-all">
							<div class="formTable readonly">
								<div class="formRow">
									<span class="formCell">
										<p:selectBooleanCheckbox disabled="true" value="#{technicalDataSheetBean.currentPhoto.blackAndWhite}" />
									</span>
									<span class="formCell">${msg.gallery_technical_data_sheet_accordion_tab_retouchs_black_and_white_conversion}</span>
									
									<span class="formCell">
										<p:selectBooleanCheckbox disabled="true" value="#{technicalDataSheetBean.currentPhoto.layersModified}" />
									</span>
									<span class="formCell ">${msg.gallery_technical_data_sheet_accordion_tab_retouchs_layers_handling}</span>
									
									<span class="formCell">
										<p:selectBooleanCheckbox disabled="true" value="#{technicalDataSheetBean.currentPhoto.straighteningUp}" />
									</span>
									<span class="formCell">${msg.gallery_technical_data_sheet_accordion_tab_retouchs_straightening_up}</span>
								</div>
								<div class="formRow">
									<span class="formCell">
										<p:selectBooleanCheckbox disabled="true" value="#{technicalDataSheetBean.currentPhoto.contrastModified}" />
									</span>
									<span class="formCell">${msg.gallery_technical_data_sheet_accordion_tab_retouchs_contrast}</span>
									
									<span class="formCell">
										<p:selectBooleanCheckbox disabled="true" value="#{technicalDataSheetBean.currentPhoto.brightnessModified}" />
									</span>
									<span class="formCell">${msg.gallery_technical_data_sheet_accordion_tab_retouchs_brightness}</span>
								</div>
							</div>
						</div>
					</p:tab>
					
					<!-- Author's note -->
					<p:tab disabled="#{empty technicalDataSheetBean.authorsNote}" title="${msg.gallery_technical_data_sheet_accordion_tab_authors_note}">
						<div class="authorsNoteAccordionContent simpleAccordionContent ui-widget-content ui-corner-all">
							<h:graphicImage styleClass="profile" value="/includes/icons/pages/gallery/technicalDataSheet/profile.png"/>
							#{technicalDataSheetBean.authorsNote.content}
						</div>
					</p:tab>
					
				</p:accordionPanel>
			</h:form>
			
			<!-- Comments & marks -->
			<p:outputPanel layout="block" rendered="#{not empty technicalDataSheetBean.currentPhotoId}" styleClass="assessmentsFormTable formTable galleryCategoryColor">
				<div class="formRow">
				
					<!-- Comments panel -->
					<span class="formCell">
						<h:form id="commentsForm">
							<p:panel header="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_title}" styleClass="commentsPanel" toggleable="false">
								
								<!-- Anonymous user -->
								<ui:include src="../components/facesMessages.xhtml">
									<ui:param name="messageContent" value="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_you_must_be_looged_to_comment_this_photo}" />
									<ui:param name="messageType" value="info" />
									<ui:param name="rendered" value="#{not userBean.user}" />
								</ui:include>
							
								<!-- Add a comment -->
								<p:commandButton icon="galleryCategoryIconSprite ui-icon-pencil" onclick="addCommentDialog.show();" rendered="#{userBean.user}" 
									styleClass="galleryCategoryBackground" type="button" value="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_button_comment}" />
								
								<hr/>
								
								<!-- Existing comments -->
								<p:dataGrid columns="1" currentPageReportTemplate="{currentPage} ${msg.general_of} {totalPages}" 
									emptyMessage="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_be_the_first_to_comment_this_photo}" id="commentsGrid" lazy="true" 
									paginator="true" paginatorPosition="bottom" paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink}" rowIndexVar="index" rows="5" 
									styleClass="commentsGrid galleryCategoryDataGridColor" var="comment" value="#{technicalDataSheetBean.commentsModel}">
									
									<f:facet name="header">
										<h:outputFormat value="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_grid_header_x_comments}">
											<f:param value="#{technicalDataSheetBean.commentsModel.rowCount}"/>
										</h:outputFormat>
									</f:facet>
									
									<div class="commentsGridContent">
										<h:graphicImage value="/includes/icons/pages/gallery/technicalDataSheet/anonymous.png"/>
										
										<span>
											#{comment.author.firstName} #{comment.author.name} |
											<h:outputText styleClass="commentsGridContentHeader" value="#{comment.additionJdkDate}">
												<f:convertDateTime dateStyle="short" locale="#{userBean.currentLocale}" timeStyle="short" type="both"/>
											</h:outputText>
										</span>
										
										<div class="commentsGridContentText">
											#{comment.content}
										</div>
									</div>
									
									<hr class="commentsGridContentHr" hidden="#{index == technicalDataSheetBean.commentsModel.rowCount-1 || (index+1) % 5 == 0 ? 'hidden' : ''}" />
								</p:dataGrid>
							</p:panel>
							
							<!-- Block UI -->
							<ui:include src="../components/blockUI.xhtml">
								<ui:param name="block" value="commentsGrid" />
								<ui:param name="trigger" value="commentsGrid" />
								<ui:param name="widgetVar" value="commentsGridBlockUI" />
							</ui:include>
						</h:form>
						
						<!-- Dialog used to add a comment -->
						<p:dialog draggable="false" dynamic="true" header="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_dialog_add_a_comment}" modal="true" 
							resizable="false" widgetVar="addCommentDialog">
							
							<!-- Error messages -->
							<p:messages autoUpdate="true" />
							
							<!-- Form -->
							<h:form styleClass="addACommentForm">
								<p:inputTextarea label="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_dialog_add_a_comment_form_comment}" required="true" 
									requiredMessage="${msg.general_form_missing_required_value}: ${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_dialog_add_a_comment_form_comment}" 
									value="#{technicalDataSheetBean.commentContentToBeAdded}"/>
								<div>
									<p:commandButton action="#{technicalDataSheetBean.addComment}" icon="galleryCategoryIconSprite ui-icon-circle-plus" 
										oncomplete="if(!args.validationFailed){addCommentDialog.hide();}" styleClass="galleryCategoryBackground" update="@form,:commentsForm:commentsGrid"
										value="${msg.gallery_technical_data_sheet_assessments_panel_comments_panel_dialog_add_a_comment_button_add}" />
								</div>
							</h:form>
						</p:dialog>
					</span>
					
					<!-- Marks panel -->
					<span class="formCell">
						<h:form>
							<p:panel header="${msg.gallery_technical_data_sheet_assessments_panel_marks_panel_title}" id="marksPanel" toggleable="false">
								
								<!-- Anonymous user -->
								<ui:include src="../components/facesMessages.xhtml">
									<ui:param name="messageContent" value="${msg.gallery_technical_data_sheet_assessments_panel_marks_panel_you_must_be_looged_to_mark_this_photo}" />
									<ui:param name="messageType" value="info" />
									<ui:param name="rendered" value="#{not userBean.user}" />
								</ui:include>
								
								<!-- Connected user -->
								<p:outputPanel layout="block" rendered="#{userBean.user and not empty technicalDataSheetBean.currentMarkValue}" styleClass="markLabel">
									<h:outputFormat value="${msg.gallery_technical_data_sheet_assessments_panel_marks_panel_you_gave_the_following_mark_the_at}">
										<f:param value="#{technicalDataSheetBean.currentMark.additionJdkDate}" />
									</h:outputFormat>
								</p:outputPanel>
								
								<p:rating id="rating" onRate="rateConfirmation.show();" readonly="#{not empty technicalDataSheetBean.currentMarkValue}" rendered="#{userBean.user}"
									styleClass="#{not empty technicalDataSheetBean.currentMarkValue ? 'marksRating' : 'readOnlyMarksRating'}" value="#{technicalDataSheetBean.currentMarkValue}" />
								
								<p:confirmDialog closable="false" header="${msg.general_confirmation_dialog_title}" 
									message="${msg.gallery_technical_data_sheet_assessments_panel_marks_panel_are_you_sure_you_want_to_give_this_mark}" 
									rendered="#{userBean.user and empty technicalDataSheetBean.currentMarkValue}" styleClass="galleryCategoryBackground" widgetVar="rateConfirmation">
									
									<p:commandButton action="#{technicalDataSheetBean.addMark}" oncomplete="rateConfirmation.hide();" update="marksPanel" 
										value="${msg.general_confirmation_dialog_button_yes}" />
									<p:commandButton onclick="rateConfirmation.hide();" type="button" value="${msg.general_confirmation_dialog_button_no}" />
								</p:confirmDialog>
								
								<hr/>
								
								<!-- The photo has not yet been marked -->
								<ui:include src="../components/facesMessages.xhtml">
									<ui:param name="messageContent" value="${msg.gallery_technical_data_sheet_assessments_panel_marks_panel_be_the_first_to_mark_this_photo}" />
									<ui:param name="messageType" value="info" />
									<ui:param name="rendered" value="#{empty technicalDataSheetBean.currentAverageMark}" />
								</ui:include>
								
								<!-- The photo has yet been marked -->
								<p:outputPanel layout="block" rendered="#{not empty technicalDataSheetBean.currentAverageMark}">
									${msg.gallery_technical_data_sheet_assessments_panel_marks_panel_average_mark}:
									<h:outputText value="#{technicalDataSheetBean.currentAverageMark.value}">
										<f:convertNumber maxFractionDigits="2" />
									</h:outputText>
									/ 5
								</p:outputPanel>
							</p:panel>
						</h:form>
					</span>
				</div>
			</p:outputPanel>
			
		</p:fieldset>
	</ui:define>

</ui:composition>